import React, {useState, useRef} from 'react'
import {message, Button, Divider, Popconfirm} from 'antd'
import {PageHeaderWrapper} from '@ant-design/pro-layout'
import ProTable, {ProColumns, ActionType} from '@ant-design/pro-table'
import {connect} from 'umi'
import {PlusOutlined} from '@ant-design/icons'
import {getLeaveList, saveOrUpdateLeaveInfo,sendLeaveBpm,deleteLeave} from '../service'
import { BPMStatusEnum, vacationType } from '@/utils/constant'
import moment from 'moment'
import VacationAddForm from '../components/VacationAddForm'

const TableList = () => {
  const actionRef = useRef();
  const [visible, setVisible] = useState(false);
  const [loading, setLoading] = useState(false);
  const [record, setRecord] = useState(null);
  const [title, setTitle] = useState(null);

  const addVacation = () => {
    setVisible(true);
    setTitle('申请');
  };

  const edit = (record) => {
    setRecord(record);
    setVisible(true);
    setTitle('编辑');
  };

  const handleCancel = () => {
    setVisible(false);
    setRecord(null);
  };

  const delLeave = (id) => {
    setLoading(true);
    deleteLeave(id).then(res => {
      if (res.flag) {
        message.success(`删除成功！`);
        actionRef.current.reload();
      } else {
        message.error(`删除失败，错误:` + res.error);
      }
      setLoading(false);
    })
  };

  const sendBpm = (id) => {
    setLoading(true);
    sendLeaveBpm(id).then(res => {
      if (res.flag) {
        message.success(`bpm发起成功！`);
        window.open(res.data);
      } else {
        message.error(`bpm错误:` + res.error);
      }
      setLoading(false);
    })
  };

  const handleSubmit = (values) => {
    setLoading(true);
    saveOrUpdateLeaveInfo(values).then((res) => {
      if (res.flag) {
        handleCancel();
        message.success(`操作保存成功！`);
        actionRef.current.reload();
      } else {
        message.error(`保存失败，错误:` + res.error);
      }
      setLoading(false);
    })
  };

  const columns = [
    {
      title: '序号',
      render: (text, record, index) => `${index + 1}`,
      hideInSearch: true,
    },
    {
      title: '工号',
      hideInSearch: true,
      dataIndex: 'code',
      key: 'code',
    },
    {
      title: '姓名',
      dataIndex: 'name',
      hideInSearch: true,
      key: 'name'
    },
    {
      title: '公司',
      dataIndex: 'orgname',
      hideInSearch: true,
      key: 'orgname'
    },
    {
      title: '部门',
      hideInSearch: true,
      dataIndex: 'unitname',
      key: 'unitname'
    },
    {
      title: '岗位',
      dataIndex: 'jobname',
      hideInSearch: true,
      key: 'jobname'
    },
    {
      title: '请假/调休天数',
      dataIndex: 'leaveDay',
      hideInSearch: true,
      key: 'leaveDay',
      render: (text) => {
        return text + "天";
      }
    },
    {
      title: '请假类型',
      dataIndex: 'type',
      key: 'type',
      hideInSearch: true,
      render: (text) => {
        const res = vacationType.find((item) => item.value === parseInt(text))
        return res ? res.label : text
      },
    },
    {
      title: '假期开始日期',
      dataIndex: 'leaveBeginTime',
      hideInSearch: true,
      render: (text) => {
        return moment(text).format('YYYY-MM-DD');
      },
    },
    {
      title: '假期结束日期',
      dataIndex: 'leaveEndTime',
      hideInSearch: true,
      render: (text) => {
        return moment(text).format('YYYY-MM-DD');
      },
    },
    {
      title: '审批状态',
      dataIndex: 'dealStatus',
      key: 'dealStatus',
      hideInSearch: true,
      valueEnum: BPMStatusEnum,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (item, record) => (
        <>
          {
            (record.dealStatus === 0) && <>
              <a onClick={() => edit(record)}>编辑</a>
              <Divider type="vertical"/>
              <Popconfirm title={`是否确认删除?`} onConfirm={() => delLeave(record.id)} okText="是" cancelText="否">
                <a>删除</a>
              </Popconfirm>
              <Divider type="vertical"/>
              <a onClick={() => sendBpm(record.id)}>发起申请</a>
            </>
          }
          {(record.dealStatus === 1 || record.dealStatus === 2) && <><a onClick={() => window.open(record.checkUrl)}>审批详情</a></>}
        </>
      ),
    }
  ];

  return (
    <PageHeaderWrapper>
      <ProTable
        actionRef={actionRef}
        rowKey="id"
        search={false}
        request={(params) => getLeaveList(params)}
        columns={columns}
        toolBarRender={(action, {selectedRows}) => [
          <Button type="primary" onClick={() => addVacation()}><PlusOutlined/>新增</Button>,
        ]}
      />
      <VacationAddForm
        loading={loading}
        visible={visible}
        record={record}
        title={title}
        onCancel={handleCancel}
        onSubmit={handleSubmit}
      />
    </PageHeaderWrapper>
  )
};

export default connect(({}) => ({}))(TableList);
